{% extends 'base.html' %}
{% load static %}

{% block title %}分析仪表板{% endblock %}

{% block extra_css %}
<style>
    .dashboard-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform 0.2s;
        margin-bottom: 20px;
    }
    .dashboard-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .metric-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 12px;
        padding: 25px;
        text-align: center;
        margin-bottom: 20px;
    }
    .metric-number {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .metric-label {
        font-size: 1rem;
        opacity: 0.9;
    }
    .chart-container {
        position: relative;
        height: 300px;
        margin: 20px 0;
    }
    .summary-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
    }
    .summary-item:last-child {
        border-bottom: none;
    }
    .summary-label {
        font-weight: 500;
        color: #495057;
    }
    .summary-value {
        font-weight: bold;
        color: #007bff;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-tachometer-alt me-2"></i>分析仪表板</h2>
                <div class="text-muted">
                    <small>数据统计时间：{{ date_range.start }} 至 {{ date_range.end }}</small>
                </div>
            </div>
        </div>
    </div>

    <!-- 核心指标 -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6">
            <div class="metric-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                <div class="metric-number">{{ total_assets }}</div>
                <div class="metric-label"><i class="fas fa-boxes me-2"></i>资产总数</div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="metric-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                <div class="metric-number">{{ total_consumables }}</div>
                <div class="metric-label"><i class="fas fa-warehouse me-2"></i>耗材总数</div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="metric-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                <div class="metric-number">{{ low_stock_consumables }}</div>
                <div class="metric-label"><i class="fas fa-exclamation-triangle me-2"></i>库存预警</div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="metric-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                <div class="metric-number">¥{{ asset_value_stats.total_value|floatformat:0|default:"0" }}</div>
                <div class="metric-label"><i class="fas fa-dollar-sign me-2"></i>资产总价值</div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 资产状态分布 -->
        <div class="col-lg-6 col-md-12">
            <div class="card dashboard-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-pie me-2"></i>资产状态分布</h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="assetStatusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 资产类别分布 -->
        <div class="col-lg-6 col-md-12">
            <div class="card dashboard-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>资产类别分布</h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="assetCategoryChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <!-- 资产部门分布 -->
        <div class="col-lg-12">
            <div class="card dashboard-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-sitemap me-2"></i>资产部门分布</h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="assetDepartmentChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 维修统计 -->
        <div class="col-lg-4 col-md-6">
            <div class="card dashboard-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-tools me-2"></i>维修统计</h5>
                </div>
                <div class="card-body">
                    <div id="maintenanceStats">
                        <div class="summary-item">
                            <span class="summary-label">进行中</span>
                            <span class="summary-value">0</span>
                        </div>
                        <div class="summary-item">
                            <span class="summary-label">已完成</span>
                            <span class="summary-value">0</span>
                        </div>
                        <div class="summary-item">
                            <span class="summary-label">已取消</span>
                            <span class="summary-value">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 借用统计 -->
        <div class="col-lg-4 col-md-6">
            <div class="card dashboard-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-handshake me-2"></i>借用统计</h5>
                </div>
                <div class="card-body">
                    <div id="borrowStats">
                        <div class="summary-item">
                            <span class="summary-label">借用中</span>
                            <span class="summary-value">0</span>
                        </div>
                        <div class="summary-item">
                            <span class="summary-label">已归还</span>
                            <span class="summary-value">0</span>
                        </div>
                        <div class="summary-item">
                            <span class="summary-label">逾期未还</span>
                            <span class="summary-value">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 库存预警 -->
        <div class="col-lg-4 col-md-6">
            <div class="card dashboard-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-exclamation-triangle me-2"></i>库存预警</h5>
                </div>
                <div class="card-body">
                    <div id="alertStats">
                        <div class="summary-item">
                            <span class="summary-label">库存不足</span>
                            <span class="summary-value">{{ low_stock_consumables }}</span>
                        </div>
                        <div class="summary-item">
                            <span class="summary-label">需要补货</span>
                            <span class="summary-value">0</span>
                        </div>
                        <div class="summary-item">
                            <span class="summary-label">已缺货</span>
                            <span class="summary-value">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 快速操作 -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card dashboard-card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-bolt me-2"></i>快速操作</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <a href="{% url 'assets:asset_analytics' %}" class="btn btn-outline-primary w-100">
                                <i class="fas fa-chart-area me-2"></i>资产分析
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{% url 'assets:maintenance_analytics' %}" class="btn btn-outline-success w-100">
                                <i class="fas fa-tools me-2"></i>维修分析
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{% url 'assets:inventory_analytics' %}" class="btn btn-outline-warning w-100">
                                <i class="fas fa-warehouse me-2"></i>库存分析
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{% url 'assets:report_list' %}" class="btn btn-outline-info w-100">
                                <i class="fas fa-file-alt me-2"></i>所有报表
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const chartData = {{ chart_data|safe }};
    
    // 资产状态分布图
    const statusCtx = document.getElementById('assetStatusChart').getContext('2d');
    const statusLabels = chartData.assets_by_status.map(item => {
        const statusMap = {
            'in_use': '使用中',
            'idle': '闲置',
            'maintenance': '维修中',
            'borrowed': '借用中',
            'faulty': '故障',
            'scrapped': '报废'
        };
        return statusMap[item.status] || item.status;
    });
    const statusData = chartData.assets_by_status.map(item => item.count);
    
    new Chart(statusCtx, {
        type: 'doughnut',
        data: {
            labels: statusLabels,
            datasets: [{
                data: statusData,
                backgroundColor: [
                    '#28a745', '#17a2b8', '#ffc107', 
                    '#007bff', '#dc3545', '#6c757d'
                ],
                borderWidth: 2,
                borderColor: '#fff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
    
    // 资产类别分布图
    const categoryCtx = document.getElementById('assetCategoryChart').getContext('2d');
    const categoryLabels = chartData.assets_by_category.map(item => item.category__name || '未分类');
    const categoryData = chartData.assets_by_category.map(item => item.count);
    
    new Chart(categoryCtx, {
        type: 'bar',
        data: {
            labels: categoryLabels,
            datasets: [{
                label: '资产数量',
                data: categoryData,
                backgroundColor: 'rgba(54, 162, 235, 0.8)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
    
    // 更新统计数据
    function updateStats(containerId, data, labelMap) {
        const container = document.getElementById(containerId);
        if (container && data.length > 0) {
            let html = '';
            data.forEach(item => {
                const label = labelMap[item.status] || item.alert_type || item.status;
                html += `
                    <div class="summary-item">
                        <span class="summary-label">${label}</span>
                        <span class="summary-value">${item.count}</span>
                    </div>
                `;
            });
            container.innerHTML = html;
        }
    }
    
    // 更新维修统计
    updateStats('maintenanceStats', chartData.maintenance_stats, {
        'pending': '待处理',
        'in_progress': '进行中',
        'completed': '已完成',
        'cancelled': '已取消'
    });
    
    // 更新借用统计
    updateStats('borrowStats', chartData.borrow_stats, {
        'pending': '待审批',
        'approved': '借用中',
        'returned': '已归还',
        'overdue': '逾期未还'
    });

    // 资产部门分布图
    const departmentCtx = document.getElementById('assetDepartmentChart').getContext('2d');
    const departmentLabels = chartData.assets_by_department.map(item => item.department__name || '未分配');
    const departmentData = chartData.assets_by_department.map(item => item.count);

    new Chart(departmentCtx, {
        type: 'bar',
        data: {
            labels: departmentLabels,
            datasets: [{
                label: '资产数量',
                data: departmentData,
                backgroundColor: 'rgba(255, 159, 64, 0.8)',
                borderColor: 'rgba(255, 159, 64, 1)',
                borderWidth: 1
            }]
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
});
</script>
{% endblock %}